<template>
  <div class="card-container" v-if="alyPoolStatistics">
    <DatePicker
      v-model:value="dateAlyPool"
      format="YYYY-MM-DD"
      value-format="YYYYMM"
      picker="month"
      @change="changeAlyPoolDate"
    />
    <div class="sever-info">
      <div>
        <span>当月已用流量</span><span>{{ alyPoolStatistics.poolUsed }}</span>
      </div>
      <div>
        <span>套餐凭证</span><span>{{ alyPoolStatistics.credentialNO }}</span>
      </div>
      <div>
        <span>当月套餐外流量</span
        ><span>{{ alyPoolStatistics.poolOutUsed }}</span>
      </div>
      <div v-show="alyPoolStatistics.credentialType.indexOf('池编号') != -1">
        <span>套餐流量使用总量</span
        ><span>{{ alyPoolStatistics.poolUsed }}</span>
      </div>
      <div v-show="alyPoolStatistics.credentialType.indexOf('池编号') != -1">
        <span>套餐总流量</span
        ><span>{{ alyPoolStatistics.poolGrandTotal }}</span>
      </div>
      <div v-show="alyPoolStatistics.credentialType.indexOf('池编号') != -1">
        <span>套餐内可用余量</span
        ><span>{{ alyPoolStatistics.poolAvaiable }}</span>
      </div>
      <div>
        <span>套餐凭证类型</span
        ><span>{{ alyPoolStatistics.credentialType }}</span>
      </div>
      <div>
        <span>套餐内总卡数</span
        ><span>{{ alyPoolStatistics.cardTotalNum }}</span>
      </div>
      <div v-show="alyPoolStatistics.credentialType.indexOf('100M') != -1">
        <span>套餐总流量</span
        ><span>{{ alyPoolStatistics.effectiveTotalFlow }}</span>
      </div>
      <div>
        <span>套餐内的生效卡数</span
        ><span>{{ alyPoolStatistics.cardActiveNum }}</span>
      </div>
      <div v-show="alyPoolStatistics.credentialType.indexOf('100M') != -1">
        <span>套餐内可用余量</span
        ><span>{{ alyPoolStatistics.effectiveAvailableFlow }}</span>
      </div>
      <div v-show="alyPoolStatistics.credentialType.indexOf('池编号') != -1">
        <span>月功能费份数</span
        ><span>{{ alyPoolStatistics.monthFeatureFee }}</span>
      </div>
      <div>
        <span>短信用量</span><span>{{ alyPoolStatistics.smsUsed }}</span>
      </div>
      <div>
        <span>月度流量使用总量</span
        ><span>{{ alyPoolStatistics.monthUsedAmount }}</span>
      </div>
      <div>
        <span>当月功能费超套份数</span
        ><span>{{ alyPoolStatistics.monthExceedFee }}</span>
      </div>
    </div>
  </div>
</template>
<script setup lang="tsx">
import { DatePicker } from 'ant-design-vue';
import { getAlyPoolStatistics } from '@/api/device';

const dateAlyPool = defineModel('dateAlyPool');
const alyPoolStatistics = defineModel<any>('alyPoolStatistics');
const emit = defineEmits(['update:alyPoolStatistics']);
const changeAlyPoolDate = async (val: any) => {
  const res: any = await getAlyPoolStatistics({ date: val });
  emit('update:alyPoolStatistics', res.data);
};
</script>
